<template>
  <view class="assessment-container">
    <!-- 返回按钮 -->
    <view class="back-btn" @click="breakToHome">返回</view>
    <!-- 开始页面 -->
    <view v-if="currentPage === 'start'" class="start-page">
      <text>健康自测评估</text>
      <view class="intro">
        <text>本测评包含10道题目，每题10分，满分100分</text>
        <text>请根据您的实际情况如实回答</text>
      </view>
      <button class="start-btn" @click="startAssessment">开始测评</button>
    </view>

    <!-- 问题页面 -->
    <view v-if="currentPage === 'question'" class="question-page">
      <view class="progress-bar">
        <view class="progress" :style="{width: progress + '%'}"></view>
      </view>
      <text class="question-number">第 {{currentQuestionIndex + 1}}/{{questions.length}} 题</text>
      <view class="question-content">
        <text>{{currentQuestion.questionName}}</text>
        <view class="options">
          <view
              v-for="(option, index) in currentQuestion.options"
              :key="index"
              class="option"
              :class="{ selected: selectedOption === index }"
              @click="selectOption(index)"
          >
            {{option}}
          </view>
        </view>
      </view>
      <view class="navigation">
        <button class="prev-btn" v-if="currentQuestionIndex > 0" @click="prevQuestion">上一题</button>
        <button class="next-btn" v-if="currentQuestionIndex < questions.length - 1" @click="nextQuestion">下一题</button>
        <button class="submit-btn" v-if="currentQuestionIndex === questions.length - 1" @click="submitAssessment">提交</button>
      </view>
    </view>

    <!-- 结果页面 -->
    <view v-if="currentPage === 'result'" class="result-page">
      <text>测评结果</text>
      <text class="score">得分：{{totalScore}}</text>
      <view class="result-analysis">
        <text>健康建议：</text>
        <text>{{healthAdvice}}</text>
      </view>
      <button class="restart-btn" @click="restartAssessment">重新测评</button>
    </view>
  </view>
</template>

<script>
import {getDoctorById, getQuestion} from "@/api/doctor/doctor";

export default {
  name: 'HealthAssessment',
  data() {
    return {
      currentPage: 'start', // start, question, result
      currentQuestionIndex: 0,
      selectedOption: null,
      answers: new Array(10).fill(null),
      questions: [],
      evaluationId:0
    }
  },
  // 计算属性
  computed: {
    currentQuestion() {
      return this.questions[this.currentQuestionIndex]
    },
    progress() {
      return ((this.currentQuestionIndex + 1) / this.questions.length) * 100
    },
    // 总分
    totalScore() {
      //reduce() 方法对数组中的每个元素应用一个函数，将其结果汇总为单个值
      return this.answers.reduce((total, answer, index) => {
        if (answer !== null) {
          return total + this.questions[index].scores[answer]
        }
        return total
      }, 0)
    },
    // 健康建议
    healthAdvice() {
      if (this.totalScore >= 90) {
        return '您的健康状况非常好！请继续保持良好的生活习惯。'
      } else if (this.totalScore >= 70) {
        return '您的健康状况良好，但仍有提升空间。建议适当增加运动量，保持规律作息。'
      } else if (this.totalScore >= 50) {
        return '您的健康状况一般，建议改善生活方式，增加运动量，注意作息规律，保持健康饮食。'
      } else {
        return '您的健康状况需要关注，建议及时调整生活方式，必要时请咨询医生。'
      }
    }
  },
  methods: {
    onLoad(options) {
      this.evaluationId = options.id
      getQuestion(this.evaluationId).then(
          res=>{
            this.questions = res.data
          }
      )
    },

    breakToHome(){
      // 跳转到shop页面
      this.$router.push('/pages/index')
    },
    startAssessment() {
      this.currentPage = 'question'
    },
    selectOption(index) {
      this.selectedOption = index
      this.answers[this.currentQuestionIndex] = index
    },
    prevQuestion() {
      if (this.currentQuestionIndex > 0) {
        this.currentQuestionIndex--
        this.selectedOption = this.answers[this.currentQuestionIndex]
      }
    },
    nextQuestion() {
      if (this.answers[this.currentQuestionIndex] === null) {
        alert('请选择一个选项')
        return
      }
      if (this.currentQuestionIndex < this.questions.length - 1) {
        this.currentQuestionIndex++
        this.selectedOption = this.answers[this.currentQuestionIndex]
      }
    },
    submitAssessment() {
      if (this.answers[this.currentQuestionIndex] === null) {
        alert('请选择一个选项')
        return
      }
      this.currentPage = 'result'
    },
    restartAssessment() {
      this.currentPage = 'start'
      this.currentQuestionIndex = 0
      this.selectedOption = null
      this.answers = new Array(10).fill(null)
    }
  }
}
</script>

<style scoped>
.back-btn {
  width: 100px;
  height: 50px;
  background: #007AFF;
  color: #fff;
  text-align: center;
  line-height: 50px;
  border-radius: 25px;
  margin-bottom: 20px;
  cursor: pointer;
}
.assessment-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
  background: #f5f5f5;
}

.start-page, .question-page, .result-page {
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

/* 开始页面样式 */
.start-page h2 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

.intro {
  margin-bottom: 40px;
  color: #666;
  line-height: 1.6;
}

.start-btn, .restart-btn {
  width: 200px;
  height: 50px;
  margin: 0 auto;
  background: #007AFF;
  color: #fff;
  text-align: center;
  line-height: 50px;
  border-radius: 25px;
  cursor: pointer;
  transition: background 0.3s;
}

.start-btn:hover, .restart-btn:hover {
  background: #0056b3;
}

/* 问题页面样式 */
.progress-bar {
  height: 6px;
  background: #eee;
  border-radius: 3px;
  margin-bottom: 20px;
}

.progress {
  height: 100%;
  background: #007AFF;
  border-radius: 3px;
  transition: width 0.3s;
}

.question-number {
  color: #666;
  margin-bottom: 20px;
}

.question-content h3 {
  color: #333;
  margin-bottom: 30px;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.option {
  padding: 15px 20px;
  background: #f5f5f5;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.option:hover {
  background: #e8e8e8;
}

.option.selected {
  background: #007AFF;
  color: #fff;
}

.navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.prev-btn, .next-btn, .submit-btn {
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}

.prev-btn {
  background: #f5f5f5;
  color: #666;
}

.next-btn, .submit-btn {
  background: #007AFF;
  color: #fff;
}

.prev-btn:hover {
  background: #e8e8e8;
}

.next-btn:hover, .submit-btn:hover {
  background: #0056b3;
}

/* 结果页面样式 */
.result-page h2 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

.score {
  text-align: center;
  font-size: 24px;
  color: #007AFF;
  margin-bottom: 30px;
}

.result-analysis {
  margin-bottom: 40px;
}

.result-analysis h3 {
  color: #333;
  margin-bottom: 15px;
}

.result-analysis p {
  color: #666;
  line-height: 1.6;
}
</style>
